﻿<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>index</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="component/layui/layui.js"></script>
  <link rel="stylesheet" href="css/comon0.css">
  <link rel="stylesheet" href="component/layui/css/layui.css">
</head>
<style>


  html {
    height: 100%;
    background-image: -webkit-radial-gradient(ellipse farthest-corner at center center, #1b44e4 0%, #020f3a 100%);
    background-image: radial-gradient(ellipse farthest-corner at center center, #1b44e4 0%, #020f3a 100%);
  }
  
  body {
    width: 100%;
    margin: 0;
    overflow: hidden;
  }
  .login-bg {
    height: 500px;
    width: 500px;
    margin-top: 100px;
    border-radius: 10px;
    box-sizing: border-box;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .login-bg>.login-content{
    width: 400px;
    height: 450px;
    padding-top: 30px;
  }
  .login-content>.login-head{
    text-align: center;
  }
  .layui-form-checked>.layui-icon-ok{
    background-color: #1e9fff !important;
  }
  </style>
<script>

  /****/
  $(document).ready(function () {
    var whei = $(window).width()
    $("html").css({ fontSize: whei / 20 })
    $(window).resize(function () {
      var whei = $(window).width()
      $("html").css({ fontSize: whei / 20 })
    });
  });
</script>
<body>
  <div class="head">
    <h1>获嘉县农废销回监控登录</h1>
  </div>
  <div class="mainbox" style="height: 100vh">
    <div class="layui-row">
      <div class="layui-col-md5 layui-col-md-offset1 ">
        <div class="map">
          <div class="map1"><img src="picture/lbx.png"></div>
          <div class="map2"><img src="picture/jt.png"></div>
          <div class="map3"><img src="picture/map.png"></div>
        </div>
      </div>
      <div class="layui-col-md5 layui-col-md-offset1 login-bg">
        <div class="login-content">
          <div class="login-head" style="text-align: center;">
            <h1>欢迎登录</h1>
          </div>
          <form class="layui-form" lay-filter="loginForm">
            <div class="form-center">
              <div style="margin-top: 30px;">
                <div class="layui-form-item" style="padding-top: 20px;">
                  <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                      <i class="layui-icon layui-icon-username"></i>
                    </div>
                    <input name="username" lay-verify="required" placeholder="账户"
                      class="layui-input" lay-reqtext="请输入用户名" lay-vertype="tips">
                  </div>
                </div>
                <div class="layui-form-item" style="padding-top: 30px;">
                  <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                      <i class="layui-icon layui-icon-password"></i>
                    </div>
                    <input name="password" type="password" value="" lay-verify="required"
                      placeholder="密码" class="layui-input" lay-affix="eye" lay-reqtext="请输入密码"
                      lay-vertype="tips">
                  </div>
                </div>
                <div class="layui-form-item">
									<div class="remember-passsword">
										<div class="remember-cehcked">
											<input type="checkbox" id="loginCheck" lay-skin="primary" title="记住我">
										</div>
									</div>
								</div>
                <div class="login-btn" style="padding-top: 30px;">
                  <button class="layui-btn layui-bg-blue layui-btn-radius login"  lay-submit lay-filter="login" style="width: 400px;">登录</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="js/request.js"></script>
<script src="js/base64.js"></script>
<script>
  layui.use(['form','request'],function(form,request){
    let loginCheck = localStorage.getItem("loginCheck")
    if (loginCheck == "true") {
      $("#loginCheck").prop("checked", true)
      var loginForm = getCookie()
      form.val("loginForm", loginForm)
    } 

    form.on('submit(login)', function (data) {
      $("button.login").attr("disabled", "disabled")
      /// 登录
      var data = data.field;
      localStorage.setItem("loginCheck", $("#loginCheck").prop("checked"));
      if ($("#loginCheck").prop("checked")) {
        let password = Base64.encode(data.password) // base64加密
        setCookie(data.username, password, 7)
      } else {
        setCookie('', '', -1)
      }
      request.postAlert("user/monitorLogin", data).then((res) => {
        sessionStorage.clear();
        sessionStorage.setItem('token',res.data.token);
        sessionStorage.setItem("userInfo", JSON.stringify(res.data));
        location.href = "./index.html"
      }).catch(() => {
        $("button.login").attr("disabled", false);
      })

      return false;
    });
    function setCookie(userId, password, days) {
      let date = new Date() // 获取时间
      date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * days) // 保存的天数
      // 字符串拼接cookie
      window.document.cookie =
        'userId' + '=' + userId + ';path=/;expires=' + date.toGMTString()
      window.document.cookie =
        'password' + '=' + password + ';path=/;expires=' + date.toGMTString()
    }

    function getCookie() {
      var loginForm = {};
      if (document.cookie.length > 0) {
        let arr = document.cookie.split('; ') //分割成一个个独立的“key=value”的形式
        for (let i = 0; i < arr.length; i++) {
          let arr2 = arr[i].split('=') // 再次切割，arr2[0]为key值，arr2[1]为对应的value
          if (arr2[0] === 'userId') {
            loginForm.username = arr2[1]
          } else if (arr2[0] === 'password') {
            loginForm.password = Base64.decode(arr2[1]) // base64解密
          }
        }
        return loginForm;
      }
    }
  })
</script>
</html>